<template>
  <div class="clubList">
    <div class="searchBox"></div>
    <div class="resultBox">
      <ul>
        <li
          :style="`width:${clubList.length > 3 ? 18 : 30}%`"
          v-for="info in clubList"
        >
          <img class="clubImg" :src="info.clubImage" alt="" />
          <div class="content">
            <p class="clubName">{{ info.clubName }}</p>
            <p class="clubIntroduce">{{ info.clubIntorduce }}</p>
            <p class="clubSlogan">{{ info.clubSlogan }}</p>
            <p class="txt">
              <span class="clubLeader">会长:{{ info.clubLeader }}</span>
              <span class="createTime">{{
                info.createTime.split(" ")[0]
              }}</span>
            </p>
            <p class="txt">
              <span class="clubLeader"
                >人数:<span class="num">{{ info.clubUsers.length }}</span></span
              >
              <span class="createTime"
                >活动数:<span class="num">~</span></span
              >
            </p>
          </div>
          <div
            class="btn"
            :style="`color:${
              ['red', 'green', '#409eff', 'black', 'white'][
                Math.floor(Math.random() * 5)
              ]
            }`"
          >
            <div class="left" @click="join(info)">
              {{
                ["我想加", "点我参团", "我要找会长", "一起Go", "GO GO GO"][
                  Math.floor(Math.random() * 5)
                ]
              }}
            </div>
            <!-- <div class="right">赞一个</div> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getClubList, addClub } from "@/api/api";
export default {
  data() {
    return {
      clubList: [],
    };
  },
  mounted() {
    this.getClubList();
  },
  methods: {
    getClubList() {
      getClubList().then((res) => {
        if(res.code == 0)
          this.clubList = res.data.list;
      });
    },
    join(info) {
      console.log(info);
      addClub({ clubId: info.id, clubName:info.clubName }).then((res) => {
        if (res.code == 2) {
          this.$message.success(
            `申请成功，再联系 ${info.clubName}会长${info.clubLeader}进行审核。`
          );
        }
        else{
          this.$message.success(res.msg);
        }
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.clubList {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('../../assets/login_bg.svg');

  * {
    padding: 0;
    margin: 0;
  }

  .resultBox {
    width: 100%;
    height: 100%;

    >ul {
      min-width: 1000px;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-evenly;

      >li:hover {
        // transform: scale(1.01);
      }

      >li {
        list-style: none;
        width: 18%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.6);
        // padding:6px;
        box-sizing: content-box;
        border-radius: 10px;
        line-height: 20px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

        .btn {
          cursor: pointer;
          display: flex;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 0 0 10px 10px;
          margin: 0;
          text-align: center;
          font-size: 20px;
          margin-top: 10px;
          font-weight: bolder;
          color: #409eff;
          letter-spacing: 5px;

          .left {
            padding: 20px 0;
            flex: 1;
          }

          .left:hover, .right:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            border-radius: 0 0 10px 10px;
          }

          .right {
            padding: 20px 0;
            flex: 1;
          }
        }

        .clubImg {
          width: 100%;
          // height 150px;
          border-radius: 10px 10px 0 0;
        }

        .clubImg:hover {
          opacity: 0.8;
        }

        .content {
          padding: 0 10px !important;

          .clubName {
            font-size: 19px;
            text-align: center;
            padding: 10px 0;
            font-weight: bolder;
            cursor: pointer;
          }

          .clubName:hover {
            text-decoration: underline;
          }

          .clubIntroduce {
            font-size: 16px;
            line-height: 22px;
            text-indent: 2em;
          }

          .clubSlogan {
            padding-top: 10px;
            font-size: 16px;
            line-height: 22px;
            color: red;
            text-indent: 2em;
          }

          .txt {
            display: flex;
            padding-top: 10px;

            .clubLeader {
              font-size: 15px;
              flex: 1;
            }

            .createTime {
              font-size: 15px;
              flex: 1;
              text-align: right;
            }
          }

          .num {
            color: #409eff;
            padding: 0 5px;
            font-weight: bolder;
            cursor: pointer;
            font-size: 19px;
          }

          .num:hover {
            text-decoration: underline;
            font-size: 21px;
          }
        }
      }
    }
  }
}
</style>